<template>
	<div class="container">
		<JxNavbar title="充值" />

		<view class="card">
			<div class="top">
				<text class="tip">钱包余额</text>
				<text class="btn" @click="navigateTo('/pages/sub/my/wallet/record/index')">资金记录</text>
			</div>
			<text class="price">{{ userInfo['money'] }}</text>
		</view>

		<view class="price-list">
			<view class="p-item  uv-border" :class="{ active: index === selectIndex }" v-for="(item, index) in moneyList" :key="index"
				@click="checkePrice(index)">
				<text>{{ item }}元</text>
			</view>
		</view>

		<view class="input-wrap uv-border-bottom">
			<text>其他金额</text>
			<input v-model='money' placeholder="请输入其他金额" @input="bindReplaceInput" @focus="focusiInput" :maxlength="10" />
			<text>元</text>
		</view>

		<div class="submit-btn">
			<uv-button shape='circle' :custom-style="{ height: '85rpx' }" type='primary' text="确认充值" @click='onSubmit'></uv-button>
		</div>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue';
import pay from '@/api/pay/index.js';
import tools from '@/utils/tools/index.js';
import orders from '@/api/orders/index.js';
import { useUserStore } from '@/store/user.js';
import JxNavbar from '@/components/navbar/index.vue'

const test = uni.$uv.test;
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo);

const selectIndex = ref(0);
const moneyList = ref([10, 20, 50, 100, 200, 500, 1000, 1500, 3000, 5000]);
const money = ref(moneyList.value[selectIndex.value]);

async function onSubmit() {
	let val = money.value;
	if (!test.number(val)) return tools.toast({ title: '请选择或输入充值金额' });

	tools.loading();
	const response = await orders.create({ money: val, type: 'money' });
	uni.hideLoading();
	if (response['code'] === 200) {
		const order_no = response['data']['order_no'];
		toWxPay(order_no);
	}
}

async function toWxPay(order_no) {
	tools.loading();
	const codeResult = await tools.getLoginCode();
	if (codeResult['code'] !== 200) {
		uni.hideLoading();
		return tools.toast({ title: codeResult['err'] });
	}
	const response = await pay.weixin({ order_no, code: codeResult['data'] });
	uni.hideLoading();
	if (response['code'] === 200) {
		const data = response['data']
		uni.requestPayment({
			provider: 'wxpay',
			timeStamp: data['timeStamp'],
			nonceStr: data['nonceStr'],
			package: data['package'],
			signType: data['signType'],
			paySign: data['paySign'],
			success: (res) => {
				userStore.init();
				tools.toast({ title: '支付成功', icon: 'success' })
			},
			fail: (err) => {
				tools.toast({ title: '支付失败', icon: 'error' })
			}
		})
	}
}

function checkePrice(index) {
	selectIndex.value = index;
	money.value = moneyList.value[selectIndex.value];
}

// 金额输入框  
function bindReplaceInput(e) {
	const value = e.detail.value;
	const newValue = value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''
	setTimeout(() => money.value = newValue, 10)
}

function focusiInput() {
	selectIndex.value = ''
}

function navigateTo(url) {
	uni.navigateTo({ url })
}
</script>

<style lang="scss" scoped>
.container {
	padding: 0 $side-width;

	.card {
		width: 100%;
		height: 280rpx;
		padding: 40rpx 30rpx;
		background-image: url("https://cdn.jingmingos.com/static/my/wallet.png");
		background-size: 100% 100%;
		color: #fff;
		box-sizing: border-box;
		margin: 20rpx 0 0 0;
		display: flex;
		flex-direction: column;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tip {
				line-height: 40rpx;
				font-size: 36rpx;
			}

			.btn {
				background-color: #e0bb7e;
				padding: 10rpx 40rpx;
				border-radius: 15px;
				font-size: 28rpx;
			}
		}

		.price {
			margin-top: 8rpx;
			font-size: 72rpx;
			line-height: 92rpx;
		}
	}

	.price-list {
		display: flex;
		flex-wrap: wrap;
		padding-top: 40rpx;

		.p-item {
			color: $uv-tips-color;
			width: 23%;
			height: 70rpx;
			border-radius: 3px;
			margin-bottom: 20rpx;
			background-color: $uv-bg-color;
			margin-right: 2.5%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;

			&:nth-child(4n) {
				margin-right: 0;
			}

			&.active {
				color: #fff;
				border-color: $uv-error !important;
				background: linear-gradient(131deg, rgba($uv-error, .6), $uv-error);
			}
		}
	}

	.input-wrap {
		height: 90rpx;
		display: flex;
		align-items: center;

		input {
			flex: 1;
			height: 90rpx;
			font-size: 30rpx;
			padding-left: 30rpx;
			text-align: right;
		}

		text {
			padding: 0 10rpx;

			&:first-child {
				color: $uv-tips-color;
			}
		}

	}

	.submit-btn {
		padding-top: 6vh;
	}
}
</style>